<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Vue Router Example</title>
  <!-- 引入Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 引入Vue Router -->
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
</head>

<body>
  <div id="app">
    <!-- 导航链接 -->
    <p>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </p>
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
  <script>
    /*
          如果你不想安装插件，也可以使用在线格式化工具：
      1.
      Prettier Playground: https://prettier.io/playground/
      2.
      HTML Formatter: https://htmlformatter.com/
      3.
      FreeFormatter: https://www.freeformatter.com/html-formatter.html
    */
    // 定义两个简单的组件
    var About = {
      template: "<div><h1>关于我们</h1><p>这里是关于我们的内容。</p></div>",
    };
    var Home = {
      template:
        `<div>
            <h1>欢迎来到首页</h1>
            <p>这里是首页的内容。</p>
            <div>{{message}}</div>
            <div><About></About></div>
        </div>`,
      data() {
        return {
          message: "Hello Vue!",
        };
      },
      components: {
        About: About
      }

    };
    // 创建路由实例并配置路由规则
    const router = new VueRouter({
      mode: "hash", // 使用'hash'模式，因为直接在HTML页面中运行时，history模式可能需要额外的服务器配置支持
      routes: [
        { path: "/", component: Home },
        { path: "/about", component: About },
      ],
    });

    // 创建Vue实例并将路由实例注入
    new Vue({
      el: "#app",
      router,
      data: {
        message: "Hello Vue!",
      },
    });
  </script>
</body>

</html>